<template>

    <div class="user-details_box">

        <div class="borderbottom tasktitle">
            <h3 class="order-details_h3">基本信息</h3>
            <el-row class="order-details_content">
                <ul style="float:left;" class="tasklist">
                    <li>任务号:{{taskDetailData.mission_id}}</li>
                    <li><span>对接人:{{taskDetailData.docked_name}}</span><span style="padding-left: 10px">手机号:{{taskDetailData.docked_phone}}</span>
                    </li>
                    <li></li>
                    <li>时&nbsp;&nbsp;&nbsp;&nbsp;限:{{taskDetailData.limit_time}}</li>
                    <li>目的地:{{taskDetailData.address}}</li>
                </ul>
                <ul style="float:right;">
                    <li v-if="taskDetailData.driver"><i class="el-icon-share el-icon--left"/>司机:{{taskDetailData.driver.name}}
                        {{taskDetailData.driver.phone}}
                    </li>
                    <li>
                        <el-button
                                :type="selectType?'default':'primary'"
                                icon="el-icon-location-outline"
                                @click="selectGuiJi"
                                class="mainbotton">司机历史轨迹
                        </el-button>
                    </li>
                    <li>
                        <el-button
                                :type="selectType?'primary':'default'"
                                icon="el-icon-location"
                                @click="selectLocation"
                                class="mainbotton">司机当前位置
                        </el-button>
                    </li>

                </ul>
            </el-row>
        </div>
        <div class="borderbottom">
            <h3 class="order-details_h3">任务进程</h3>
            <el-row class="order-details_content">
                    <el-steps :active="20" space="56px" direction="vertical" style="float:left;">
                    <el-step :title="item.name" :description="item.date" v-for="item in stepList" v-if="item.type"></el-step>
                    <el-step title="已取消" :description="taskDetailData.cancel_time" v-if="taskDetailData.status == -1"></el-step>
                    <!--<el-step :title="taskDetailData.created_at?'创建' + taskDetailData.created_at:'创建'"></el-step>-->
                    <!--<el-step :title="taskDetailData.confirm_time?'确认' + taskDetailData.confirm_time:'确认'"></el-step>-->
                    <!--<el-step :title="taskDetailData.start_time?'开始' + taskDetailData.start_time:'开始'"></el-step>-->
                    <!--<el-step :title="taskDetailData.arrive_time?'到达' + taskDetailData.arrive_time:'到达'"></el-step>-->
                    <!--<el-step :title="taskDetailData.complete_time?'完成' + taskDetailData.complete_time:'完成'"></el-step>-->
                    </el-steps>
                <div style="float:right;">
                    <driver-trajectory
                            :showToolBar="false"
                            :showSearch="false"
                            :driver-list="driverDataList"
                            :mapHeight="'270px'"
                            style="width: 400px;height:270px">
                    </driver-trajectory>
                </div>
            </el-row>
        </div>
        <div class="borderbottom taskorder">
            <h3 class="order-details_h3">任务运单</h3>
            <el-row class="order-details_content">
                <div style="float:left;">
                    <ul>
                        <li class="listTitle">取({{taskDetailData.related_pick_orders_count}})</li>
                        <li class="listItem" v-for="item in taskDetailData.related_pick_orders" v-if="taskDetailData.related_pick_orders" @click="seeOrderDetail(item.id)">
                            <img src="./imgs/undone@3x.png" alt="" class="itemimg" v-if="item.pivot.status == 0">
                            <img src="./imgs/done@3x.png" alt="" class="itemimg" v-if="item.pivot.status == 1">
                            <img src="./imgs/abnormal@3x.png" alt="" class="itemimg" v-if="item.pivot.status == -1 || item.pivot.status == -10 ">
                            <div class="item">
                                <div style="margin-top:12px">
                                    <p><span>{{item.full_dingdong}}</span></p>
                                    <p style="color:#1F4BA5;font-size:13px">{{item.full_dingdong}}</p>
                                </div>
                                <div style="margin-top:10px">
                                    <p>{{item.res_link}} {{item.total_weight}}KG </p>
                                    <!--<p style="font-size:13px;color:#9B9B9B">有码 <span style="color:#EEAD0E;">保价¥5000</span></p>-->
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div style="float:right;">
                    <ul>
                        <li class="listTitle">送({{taskDetailData.related_send_orders_count}})</li>
                        <li class="listItem" v-for="item in taskDetailData.related_send_orders"
                            v-if="taskDetailData.related_send_orders"  @click="seeOrderDetail(item.id)">
                            <img src="./imgs/undone@3x.png" alt="" class="itemimg" v-if="item.pivot.status == 0">
                            <img src="./imgs/done@3x.png" alt="" class="itemimg" v-if="item.pivot.status == 1">
                            <img src="./imgs/abnormal@3x.png" alt="" class="itemimg"
                                 v-if="item.pivot.status == -1 || item.pivot.status == -10 ">
                            <div class="item">
                                <div style="margin-top:12px">
                                    <p><span>{{item.full_dingdong}}</span></p>
                                    <p style="color:#1F4BA5;font-size:13px">{{item.full_dingdong}}</p>
                                </div>
                                <div style="margin-top:10px">
                                    <p>{{item.res_link}} {{item.total_weight}}KG </p>
                                    <!--<p style="font-size:13px;color:#9B9B9B">有码 <span style="color:#EEAD0E;">保价¥5000</span></p>-->
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>
            </el-row>
        </div>
        <div class="borderbottom" style="border: none;">
            <h3 class="order-details_h3">任务操作</h3>
            <el-row class="order-details_content">
                <el-col :span="24" style="text-align: center" v-if="taskDetailData.status == 100">
                    <el-button type="primary" disabled style="width:350px;">任务已完成</el-button>
                </el-col>
                <el-col :span="24" style="text-align: center" v-else-if="taskDetailData.status == -1">
                    <el-button type="primary" disabled style="width:350px;">任务已取消</el-button>
                </el-col>
                <el-col :span="24" style="text-align: center" v-else>
                    <el-button type="primary" style="width:100px;" @click="completeTask(taskDetailData.id)">完成任务</el-button>
                    <!--<el-button type="primary" style="width:100px;" @click="reDispatchTask(taskDetailData.id,taskDetailData.driver_id)">改派任务</el-button>-->
                    <el-button type="danger" style="width:100px;" @click="cancelTask">取消任务</el-button>
                </el-col>

            </el-row>
        </div>
    </div>

</template>
<script>

    import DriverTrajectory from '../map/DriverMap/DriveRoute';
    import Vue from 'vue';

    export default {
        name: 'task-details',
        components: {
            DriverTrajectory
        },
        props: {
            taskDetail: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            driverData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                orderId: null,
                dialogVisible: false,
                selectType: false,
                baseDriverData: [],
                // stepList: [
                //     {
                //         id: 1,
                //         name: '创建',
                //         date: '',
                //         type: false
                //     },
                //     {
                //         id: 2,
                //         name: '确认',
                //         date: '',
                //         type: false
                //     },
                //     {
                //         id: 3,
                //         name: '开始',
                //         date: '',
                //         type: false
                //     },
                //     {
                //         id: 4,
                //         name: '到达',
                //         date: '',
                //         type: false
                //     },
                //     {
                //         id: 5,
                //         name: '完成',
                //         date: '',
                //         type: false
                //     }
                // ]
            }
        },
        computed: {

            taskDetailData: function (value) {
                return this.taskDetail;
            },
            driverDataList: function (value) {
                return this.driverData;
            },
            stepList: function (value) {
                return [
                    {
                        id: 1,
                        name: '创建',
                        date: this.taskDetailData.created_at,
                        type: this.taskDetailData.created_at ? true : false
                    },
                    {
                        id: 2,
                        name: '确认',
                        date: this.taskDetailData.confirm_time,
                        type: this.taskDetailData.confirm_time ? true : false
                    },
                    {
                        id: 3,
                        name: '开始',
                        date: this.taskDetailData.start_time,
                        type: this.taskDetailData.start_time ? true : false
                    },
                    {
                        id: 4,
                        name: '到达',
                        date: this.taskDetailData.arrive_time,
                        type: this.taskDetailData.arrive_time ? true : false
                    },
                    {
                        id: 5,
                        name: '完成',
                        date: this.taskDetailData.complete_time,
                        type: this.taskDetailData.complete_time ? true : false
                    }
                ]
            }
        },
        // watch: {
        //     taskDetailData: {
        //         hanlder(value) {
        //             this.stepList.forEach(item => {
        //                 switch (item.id) {
        //                     case 1:
        //                         if (value.created_at) {
        //                             item.date = value.created_at;
        //                             item.type = true
        //                         }
        //                         break;
        //                     case 2:
        //                         if (value.confirm_time) {
        //                             item.date = value.confirm_time;
        //                             item.type = true
        //                         }
        //                         break;
        //                     case 3:
        //                         if (value.start_time) {
        //                             item.date = value.start_time;
        //                             item.type = true
        //                         }
        //                         break;
        //                     case 4:
        //                         if (value.arrive_time) {
        //                             item.date = value.arrive_time;
        //                             item.type = true
        //                         }
        //                         break;
        //                     case 5:
        //                         if (value.complete_time) {
        //                             item.date = value.complete_time;
        //                             item.type = true
        //                         }
        //                         break;
        //
        //                 }
        //             })
        //             console.info('改造后的步骤', this.stepList);
        //         },
        //         deep:true
        //
        //     }
        // },
        methods: {
            // reDispatchTask(id, driver_id) {
            //     this.$emit('reDispatch',id, driver_id);
            // }, // 改派任务
            seeOrderDetail(orderId) {
                this.$router.push({path:'/dialog/show/express.order/' + orderId});
            },
            cancelTask() {
                this.$confirm('是否取消任务？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        this.$emit('cancel');
                    })
                    .catch(action => {
                    });


            }, // 取消任务
            selectGuiJi() {
                this.selectType = false;
                this.driverData.localtion = this.baseDriverData;
            },
            selectLocation() {
                this.selectType = true;
                this.baseDriverData = this.driverData.localtion;
                this.driverData.localtion = this.driverData.localtion.slice(0, 1);
            },
            completeTask() {
                this.$confirm('是否完成任务？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        this.$emit('complete');
                    })
                    .catch(action => {
                    });

            }
        }
    }
</script>

<style lang="less">
    .user-details_box{
        .el-step__description{
            font-size: 14px !important;
        }
        .el-steps--vertical{
            width: 40%;
        }
    }

</style>
<style scoped lang="less">
    .user-details_box {
        display: flex;
        flex-direction: column;

        .changeedit {
            cursor: pointer;
        }
        .colorchange {
            color: #009688;
            padding-left: 4px;
        }
        .borderbottom {
            padding: 0 41px;

        }
        .tasktitle {
            margin-bottom: 25px;
        }
        .taskorder {
            margin-bottom: 20px;
        }
        .paddingbottom {
            padding-bottom: 10px;
        }
        .order-details_title {
            margin: 0 auto;
        }
        .order-details_h3 {
            font-size: 18px;
            color: #000;
            margin: 7px 0 11px 0px;
        }
        .order-details_content {
            overflow: hidden;
            font-size: 16px;
            .tasklist > li {
                line-height: 30px;
            }
            .mainbotton {
                width: 180px;
                margin-top: 8px;
            }
            .listTitle {
                height: 50px;
                text-align: center;
                line-height: 50px;
                width: 355px;
                background: #EEEEEE;
            }
            .listItem {
                height: 59px;
                border-bottom: 3px solid #eee;
                display: flex;
                .itemimg {
                    width: 26px;
                    height: 26px;
                    margin-top: 17px;
                    margin-left: 10px;
                    margin-right: 20px;
                }
                .item {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    /*.order-hover:hover{*/
                        /*color: rgba(0,0,0,0.6);*/
                        /*cursor: pointer;*/
                    /*}*/
                }
            }
            .listItem:hover{
                background-color: rgba(0,0,0,0.1);
                cursor: pointer;
            }
        }

    }

</style>

